<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试页Demo</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <link type="text/css" href="css/phone.css" rel="stylesheet">
    <link type="text/css" href="module/modulestyle.css" rel="stylesheet">
</head>
<body>




<div class="drag-card ui-draggable" style="display: block;">

    <div id="card-56004" class="banner-box">
        <div class="bd">
            <ul style="position: relative; width: 400px; height: 200px;">
                <li style="background: rgb(243, 229, 216); position: absolute; width: 400px; left: 0px; top: 0px; display: none;">
                    <div class="m-width">
                        <a href="javascript:void(0);"><img src=""></a>
                    </div>
                </li>
                <li style="background: rgb(176, 20, 21); position: absolute; width: 400px; left: 0px; top: 0px; display: list-item;">
                    <div class="m-width">
                        <a href="javascript:void(0);"><img src=""></a>
                    </div>
                </li>
                <li style="background: rgb(196, 152, 3); position: absolute; width: 400px; left: 0px; top: 0px; display: none;">
                    <div class="m-width">
                        <a href="javascript:void(0);"><img src=""></a>
                    </div>
                </li>
                <li style="background: rgb(253, 253, 245); position: absolute; width: 400px; left: 0px; top: 0px; display: none;">
                    <div class="m-width">
                        <a href="javascript:void(0);"><img src=""></a>
                    </div>
                </li>

            </ul>
        </div>
        <div class="banner-btn">
            <div class="hd"><ul><li class="">1</li><li class="on">2</li><li class="">3</li><li class="">4</li></ul></div>
        </div>
    </div>

</div><div class="drag-card ui-draggable" style="display: block;">
    <div id="card2-291415" class="menu-list">
        <div id="menuList" class="row"><div id="itemId0" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div><div id="itemId1" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div><div id="itemId2" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div><div id="itemId3" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div><div id="itemId4" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div><div id="itemId5" class="col-xs-4">    <div style="text-align:center;">        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">        <p style="margin-top: 10px">设置文字</p>    </div> </div></div>
    </div>
</div><div class="drag-card ui-draggable" style="display: block;">

    <div id="card3-113765" class="menu-list">
        <div id="shopList" class="row" style="margin: 10px"><div id="shopItem0" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem1" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem2" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem3" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem4" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem5" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem6" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem7" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem8" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem9" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem10" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div><div id="shopItem11" class="col-xs-6">        <div>           <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">             <p style="margin-top: 10px">商品名称</p>             <p style="margin-top: 5px;color: #B01415">商品价格</p>       </div>   </div></div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--后面还是加载自己的js-->
<script src="js/jq/jquery-ui.js"></script>
<script src="js/jq/jquery.ui.touch-punch.min.js"></script>

<!--组件js-->
<script src="module/banner/jquery.SuperSlide.2.1.1.js"></script>
<script src="module/module.js"></script>

<script>

    $(document).ready(function() {
        startBanner();
        setMenuListItem(3);
        setShopListItem(12);
    });

</script>

</body>
</html>